import { Link, LinkProps } from 'react-router-dom';

import cs from 'classnames';

import styles from './index.module.scss';

const Tabs = <T extends React.Key>({
  items,
  value,
  onChange
}: {
  items: { label: string; value: T }[];
  value: T;
  onChange: (value: T) => void;
}) => {
  return (
    <div className={styles['tabs']}>
      {items.map((item) => (
        <div
          key={item.value as React.Key}
          className={cs(styles['tabs-item'], {
            [styles['active']]: item.value === value
          })}
          onClick={onChange.bind(null, item.value)}
        >
          {item.label}
        </div>
      ))}
    </div>
  );
};

const Panel: React.FC<{
  corner?: LinkProps;
  tips?: LinkProps[];
  title?: React.ReactNode;
  children?: React.ReactNode;
}> & {
  Tabs: typeof Tabs;
} = ({ corner, tips, title, children }) => {
  return (
    <>
      <div className={styles['panel']}>
        {corner && <Link {...corner} className={styles['corner-link']} />}

        {title && <div className={styles['title']}>{title}</div>}

        <div className={styles['content']}>{children}</div>

        {tips && tips.length > 0 && (
          <div className={styles['tips']}>
            {tips.map((tip, index) => (
              <Link key={index} {...tip} />
            ))}
          </div>
        )}
      </div>
    </>
  );
};

Panel.Tabs = Tabs;
export default Panel;
